import React, { useState } from 'react';
import { useSelector ,useDispatch} from 'react-redux';
import { Search ,Toast, NavBar ,Sidebar,IndexBar, Grid, Cell,Image, Flex ,Sticky} from 'react-vant';
import { STORETYPE ,INDEXTAB,FILTERLIST} from '../../Type/Store.d';
import { useNavigate } from 'react-router-dom';
import _ from 'lodash';

function Classify() {
    const Dispatch = useDispatch();
    const Navigate = useNavigate();

    const [value, setValue] = useState('');
    const [active, setActive] = useState(0);
    const list = useSelector((state:STORETYPE)=>state.list);
    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    const filterList = ['鲜花','治愈','音乐'];
    console.log(list);
    // const indexList = [];
    const customIndexList = [0,1, 2, 3];
    // const charCodeOfA = 'A'.charCodeAt(0);

    // for (let i = 0; i < 26; i += 1) {
    // indexList.push(String.fromCharCode(charCodeOfA + i));
    // }

    return (
        <div className='Classify'>
            <Sticky >
            <NavBar
                title={<><Search value={value} onChange={setValue} placeholder="请输入搜索关键词" /></>}
                leftText="返回"
                rightText="搜索"
                onClickLeft={() => Toast('返回')}
                // 4.点击搜索按钮时使用防抖/节流进行优化
                onClickRight={_.debounce(() => Navigate('/SearchList',{state:value}),2000)}
            /></Sticky>
            <Sidebar
                value={active}
                onChange={(v) => {
                    setActive(v);
                    console.log(active,'---v');
                    Dispatch({
                        type:INDEXTAB,
                        payload:v
                    })
                }}
            >
                {/* 正确实现分类楼层效果 */}
                {
                    list.map((item,index)=>{
                        return <Sidebar.Item title={item.txt} key={index}>
                            {/* 筛选列表 */}
                            <Sticky>
                            <Grid columnNum={3}>
                                {filterList.map((x, y) => (
                                    <Grid.Item key={y}  text={x} onClick={()=>{
                                        Dispatch({
                                            type:FILTERLIST,
                                            payload:x
                                        })
                                    }}/>
                                ))}
                            </Grid></Sticky>
                                    <IndexBar indexList={customIndexList}>
                                        {list.map((item,index) => (
                                            <div key={index}>
                                                <IndexBar.Anchor index={index}> {item.type}</IndexBar.Anchor>
                                                <Cell title={<>
                                                    <Grid columnNum={3}>
                                                        {childrenList.map((v, i) => (
                                                            <Grid.Item key={i} icon={<Image width="60" height="60" src={v.src} />} text={v.type} onClick={()=>Navigate('/Detail/'+v.id,{state:v})}/>
                                                        ))}
                                                    </Grid>
                                                </>} />
                                            </div>
                                        ))}
                                    </IndexBar>
                                </Sidebar.Item>
                    })
                }
            </Sidebar>
        </div>
    )
}

export default Classify